<template>
    <view style="height: 100%">
        <!-- pages/searchPage/searchPage.wxml -->

        <view class="searchBar v-center around">
            <input class="search-input" @input="inputKey" :value="key" placeholder="搜索您要的商品" />
            <view :style="'background:' + color" @tap="searchKey" class="search_btn">确定</view>
        </view>
        <view class="keyword">
            <view class="titleBar v-center between">
                <text>最近搜索</text>
                <view @tap="delHistory" class="actionBtn kxfont icon-shanchu"></view>
            </view>
            <view class="wrap keyList">
                <text @tap="linkProList" class="keyItem" :data-value="item" v-for="(item, index) in history" :key="index">{{ item }}</text>
            </view>
        </view>
        <view class="keyword">
            <view class="titleBar v-center between">
                <text>热门搜索</text>
                <!-- <view bindtap='changeNext' class="actionBtn">换一批</view> -->
            </view>
            <view class="wrap keyList">
                <text @tap="linkProList" class="keyItem" :data-value="item.Fkey" v-for="(item, index) in hot" :key="index">{{ item.Fkey }}</text>
            </view>
        </view>
    </view>
</template>

<script>
// pages/searchPage/searchPage.js
var util = require('../../utils/util.js');
var api = require('../../utils/prom.js'); 
export default {
    data() {
        return {
            history: [],
            hot: [],
            key: '',
            hasLogin: false,
            color: app.globalData.color
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        var arr = uni.getStorageSync('keyhistory');
        if (arr.length > 0) {
            this.history =  arr;
            //this.setData({key: arr[0] });
        }
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        var that = this;
        that.searchHot();
    },
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        //删除记录
        delHistory: function () {
            uni.removeStorage({
                key: 'keyhistory'
            });
            this.history = [];
        },

        //搜索热门词查询
        searchHot: function () {
            var that = this;
            var param = {
                token: uni.getStorageSync('token')
            };
            api.requestAll('SpHotKey', 'get', param, function (res) {
                that.hot = res.data.Rows;
            });
        },

        inputKey: function (e) {
            var that = this;
            that.key = e.detail.value;
        },

        //搜索
        searchKey: function () {
            var that = this;
            console.log(that.key);
            if (util.isEmpty(that.key)) {
                uni.showToast({
                    title: '请输入关键词查询'
                });
                return;
            }
            uni.navigateTo({
                url: '/pages/proSearchList/proSearchList?key=' + that.key
            });
        },

        setKey: function (key) {
            var that = this;
            var history = that.history;
            history.map(function (item, index) {
                if (item == key) {
                    history.splice(index, 1);
                }
            });
            if (history.length == 0) history.push(key);
            else if (history.length >= 15) {
                history.unshift(key);
                history.pop();
            } else {
                history.unshift(key);
            }
            uni.setStorageSync('keyhistory', history);
            that.history =  history;
        },

        //点击搜索热词
        linkProList: function (e) {
            var that = this;
            that.key = e.currentTarget.dataset.value;
            that.searchKey();
        }
    }
};
</script>
<style>
@import './searchPage.css';
</style>
